import { Carousel } from '@douyinfe/semi-ui';
import Title from '../../components/Title'
import { IconArrowLeft, IconArrowRight } from "@douyinfe/semi-icons";
import './Recomment.moudle.css'
import MyNav from '../../components/Nav';
type ArrItem = {
  value: string,
  label: string
}

const Recomment = () => {
  const picArr = [
    'public/images/libA.webp',
    'public/images/libB.webp',
    'public/images/libC.webp',
    'public/images/libD.webp',
  ]
  return (
    <div className='recomment'>
      <div className="head1">
        <img src="../../../public/images/tenyears.webp" alt="" />
        <Title></Title>
        <div className="data">
          {

          }
        </div>
      </div>

      <div className="lun">
        <Carousel
          style={{ width: '100%', height:"100%" }}
          autoPlay={true}
          indicatorType='dot'
          arrowType="hover"
          arrowProps={{
            leftArrow: { children: <IconArrowLeft size='large'/> },
            rightArrow: { children: <IconArrowRight size='large'/> },
          }}
        >
          {picArr.map((src, index) => (
            <div key={index}>
              <img
                src={src}
                style={{ width: '100%' }}
              />
            </div>
          ))}
        </Carousel>
      </div>
      <div className="nav" >
        <MyNav></MyNav>
      </div>
    </div>
  )
}

export default Recomment